
<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>在线支付</p>
		</header>
		<!-- 订单信息部分 -->
		<h3>订单信息：</h3>
		<div class="order-info">
			<p>
				{{orders.business.businessName}}
				<i class="fa fa-caret-down" @click="detailetShow"></i>
			</p>
			<p>&#165;{{orders.orderTotal}}</p>
		</div>
		<!-- 订单明细部分 -->
		<ul class="order-detailet" v-show="isShowDetailet">
			<li v-for="item in orders.list">
				<p>{{item.food.foodName}} x {{item.quantity}}</p>
				<p>&#165;{{item.food.foodPrice*item.quantity}}</p>
			</li>
			<li>
				<p>配送费</p>
				<p>&#165;{{orders.business.deliveryPrice}}</p>
			</li>
		</ul>
		<!-- 支付方式部分 -->
		<ul class="payment-type">
			<li>
				<div class="pay">
					<img src="../assets/qb.webp">
					<div class="text">钱包支付</div>
				</div>
				<i class="fa fa-check-circle"></i>
			</li>
			<li>
				<img src="../assets/alipay.jpg">
			</li>
			<li>
				<img src="../assets/wechat.png">
			</li>
		</ul>
		<div class="payment-button">
			<button @click="pay">确认支付</button>
		</div>
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>
<script>
	import Footer from '../components/Footer.vue';
	export default {
		name: 'Payment',
		data() {
			return {
				user:{},
				updateuser:{},
				usercart:{},
				amount:'',
				orderId: this.$route.query.orderId,
				orders: {
					business: {}
				},
				isShowDetailet: false,
				order:{},
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			this.$axios.post('OrdersController/getOrdersById', this.$qs.stringify({
				orderId: this.orderId
			})).then(response => {
				this.orders = response.data;
			}).catch(error => {
				console.error(error);
			});
			
			this.$axios.post('OrdersController/getOrderByOrderId', this.$qs.stringify({
				orderId: this.orderId
			})).then(response => {
				this.order = response.data;
			}).catch(error => {
				console.error(error);
			});
			
			this.$axios.post('UserCartController/getUserCartByUserId',this.$qs.stringify({
				userId:this.user.userId,
			})).then(response=>{
				this.usercart=response.data;
			}).catch(error => {
				console.error(error);
			});
			this.$axios.post('UserController/getUserByUserId',this.$qs.stringify({
				userId:this.user.userId,
			})).then(response=>{
				this.updateuser=response.data;
			}).catch(error => {
				console.error(error);
			});
		},
		mounted() {
			//这里的代码是实现：一旦路由到在线支付组件，就不能回到订单确认组件。
			//先将当前url添加到history对象中
			history.pushState(null, null, document.URL);
			//popstate事件能够监听history对象的变化
			window.onpopstate = () => {
				this.$router.push({
					path: '/index'
				});
			}
		},
		unmounted() {
			window.onpopstate = null;
		},
		methods: {
			pay(){
				if(this.updateuser.walletBalance-this.order.orderTotal<0){
					alert('余额不足！');
				}
				else{
					this.$axios.post('UserController/addBalanceById',this.$qs.stringify({
						userId:this.user.userId,
						amount:this.orders.orderTotal,
						walletBalance:Number(this.updateuser.walletBalance)-Number(this.order.orderTotal),
					})).then(response=>{
						
					}).catch(error=>{
						console.error(error);
					});
					
					this.$axios.post('TranDetailController/saveTranDetail',this.$qs.stringify({
						userId:this.user.userId,
						amount:this.order.orderTotal,
						trantype:'3',
					})).then(response=>{
						
					}).catch(error=>{
						console.error(error);
					});
					
					this.$axios.post('CreditController/addByUserId',this.$qs.stringify({
						userId:this.user.userId,
						type:'1',
						credit:this.order.orderTotal,
						expired_time:'2099-1-1 23:59:59',
					})).then(response=>{
						alert('ok');
					}).catch(error=>{
						console.error(error);
					});
					this.$router.push({path:'/after',
					query: {
						orderTotal: this.order.orderTotal
					}
					});
				}
			},
			detailetShow() {
				this.isShowDetailet = !this.isShowDetailet;
			}
		},
		components: {
			Footer
		}
	}
</script>
<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 订单信息部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 0;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .order-info {
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-info p:last-child {
		color: orangered;
	}

	/****************** 订单明细部分 ******************/
	.wrapper .order-detailet {
		width: 100%;
	}

	.wrapper .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-detailet li p {
		font-size: 3vw;
		color: #666;
	}

	/****************** 支付方式部分 ******************/
	.wrapper .payment-type {
		width: 100%;
	}

	.wrapper .payment-type li {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .payment-type li img {
		width: 33vw;
		height: 8.9vw;
	}
	

	.wrapper .payment-type li .fa-check-circle {
		font-size: 5vw;
		color: #38CA73;
	}

	.wrapper .payment-button {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
	}

	.wrapper .payment-button button {
		width: 100%;
		height: 10vw;
		border: none;
		/*去掉外轮廓线*/
		outline: none;
		border-radius: 4px;
		background-color: #38CA73;
		color: #fff;
	}
</style>
